<template>
  <div style="position: relative;">
    <div class="DataDispose_left" :class="{'DataDispose_left_fold':stateFold}">
      <div class="DataDispose_header">
        <h3>全部试验人员</h3>
        <a-button type="primary" @click="returnTaskData" style="float: right;">返回试验数据列表</a-button>
        <p>白参试验</p>
      </div>
      <div class="DataDispose_filtrate">
        <a-form layout="inline" style="display: inline-block;">
          <a-form-item>
            <a-input style="width: 170px" v-model="queryParam.userCode" placeholder="请输入用户编号" />
          </a-form-item>
          <a-form-item>
            <a-select defaultValue="lucy" style="width: 170px" v-model="queryParam.status" placeholder="请选择试验状态">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">编辑中</a-select-option>
              <a-select-option value="2">预发布</a-select-option>
              <a-select-option value="3">进行中</a-select-option>
              <a-select-option value="4">已结束</a-select-option>
              <a-select-option value="5">暂停</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <div class="DataDispose_header_button">
          <a-button type="primary" icon="upload" @click="createFormBox=false" v-if="stateFold" />
          <a-button type="primary" icon="upload" @click="createFormBox=false" v-else>批量导出</a-button>
        </div>
      </div>
      <div class="DataDispose_content">
        <a-icon class="DataDispose_content_icon" type="double-right" @click="stateFold= false" v-if="stateFold" />
        <s-table class="table_style" ref="table" :rowSelection="rowSelection" size="default" rowKey="key" :columns="stateFold === false?testerTableAll:testerTable" :data="userListData">
          <template slot="experimentSchedule" slot-scope="text, record, index">
            <a-progress v-if="record.experimentSchedule==1" :percent="100" />
            <a-progress :percent="(record.experimentSchedule*100).toFixed(1)" status="active" />

          </template>
          <template slot="qualifiedRate" slot-scope="text, record, index">
            <a-progress v-if="record.qualifiedRate==1" :percent="100" />
            <a-progress v-else :percent="(record.qualifiedRate*100).toFixed(1)" size="small" strokeColor="#EEA91C" />
          </template>
          <template slot="status" slot-scope="text, record, index">
            <a-badge class="item_top_status" :status="statusObj[record.status]" :text="statusNameObj[record.status]" />
          </template>
          <span slot="action" slot-scope="text, record, index" class="operation_button_box">
            <template>
              <a-button type="primary" @click="userListDataPending(record.userId,record.experimentId)" v-if="record.pending">待处理</a-button>
              <a-button type="primary" @click="userListDataPending(record.userId,record.experimentId)" v-else>查看</a-button>
            </template>
          </span>
        </s-table>
      </div>
    </div>

    <div class="DataDispose_right" :class="{'DataDispose_right_fold':stateFold}">
      <div v-if="stateFold">
        <div class="right_header">
          <h3>试验任务数据</h3>
          <div class="right_header_button">
            <a-button type="primary" icon="edit" @click="changeStatus=true">操作状态</a-button>
          </div>
        </div>
        <div class="right_content">
          <div class="right__info">
            <div class="right__info_title">
              <span>试验状态：</span>
              <a-badge class="title_badge" :status="statusObj[userExperimentInfo.status]" :text="statusNameObj[userExperimentInfo.status]" />
              <span>备注：{{userExperimentInfo.operateDes}}</span>
            </div>
            <div class="right__info_item">
              <span>姓名</span>
              <i>{{ userExperimentInfo.userName }}</i>
            </div>
            <div class="right__info_item">
              <span>账号</span>
              <i>{{ userExperimentInfo.userCode }}</i>
            </div>
            <div class="right__info_item">
              <span>身份证号</span>
              <i>{{ userExperimentInfo.identityCard }}</i>
            </div>
            <div class="right__info_item">
              <span>紧急联系人</span>
              <i>{{ userExperimentInfo.emergencyContactName }}</i>
            </div>
            <div class="right__info_item">
              <span>紧急联系人关系</span>
              <i>{{ userExperimentInfo.emergencyContactRelation }}</i>
            </div>
            <div class="right__info_item">
              <span>紧急联系人电话</span>
              <i>{{ userExperimentInfo.emergencyContactPhone }}</i>
            </div>
          </div>

          <a-tabs defaultActiveKey="1">
            <a-tab-pane v-for="(item,i) in userExperimentInfo.taskVOS" :tab="item.taskName+'  ('+taskTypeObj[item.taskType]+')'" :key="i+1">

              <div class="right__info_tab_option" v-if="item.taskType==3">
                <span style="margin-right:20px;">选择题：{{item.taskDes}}</span><br>
                <span>选项:
                  <i v-for="(option,index) in item.choicesDetail" :class="{'abnormal':option.type==1?true:false,'option_style':true}">{{index+1}}:{{option.des}}</i>
                </span>
              </div>
              <div class="right__info_tab_top" v-else>
                <div class="tab_top_item">
                  <a-badge class="tab_top_item_state" status="processing" text="正常" />
                  <i>{{ item.clockCount }}</i>
                </div>
                <div class="tab_top_item">
                  <a-badge class="tab_top_item_state" status="warning" text="缺失" />
                  <i>{{ item.unClockCount }}</i>
                </div>
                <div class="tab_top_item">
                  <a-badge class="tab_top_item_state" status="error" text="连续缺失" />
                  <i>{{ item.continuousUnClockCount }}</i>
                </div>
              </div>

              <div class="taskTableAllRemark">
                <a-button type="primary" @click="taskTableAllRemarkEvent" v-if="taskTableAllRemarkObj.length >0">批量备注</a-button>
              </div>

              <a-table :rowSelection="rowSelection" :columns="item.taskType==1?taskInfoTable:taskInfoTableQuestionnaire" :pagination="false" :dataSource="item.taskTabData" class="right_info_tab_table">
                <template slot="statusName" slot-scope="text, record, index" class="table_status_box">
                  <div v-if="item.taskType==3">
                    <a-badge class="table_status_box_title" status="warning" text="缺失" v-if="record.recordDetailVOS[0].choiceType == 2" />
                    <a-tooltip placement="top" v-else>
                      <template slot="title">
                        <p :class="{'table_error':record.recordDetailVOS[0].choiceType == 3}">选项： {{ record.recordDetailVOS[0].answer }}</p>
                        <p :class="{'table_error':record.recordDetailVOS[0].choiceType == 3,'table_hint_time':true}">时间：{{ record.recordDetailVOS[0].clockTime }}</p>
                      </template>
                      <a-badge class="table_status_box_title" status="processing" text="正常" v-if="record.recordDetailVOS[0].choiceType == 1" />
                      <a-badge class="table_status_box_title table_status_box_title_warning" status="warning" text="异常" v-else />
                    </a-tooltip>

                  </div>
                  <a-tooltip placement="top" v-else>
                    <template slot="title">
                      <div v-for="(VOS,idnex) in record.recordDetailVOS" class="table_hints" :key="idnex">
                        <p>标题：{{ VOS.des }}</p>
                        <!-- <p :class="{'table_hint_normal':VOS.status===1,'table_hint_lack':VOS.status===2,'table_hint_repair':VOS.status===3}">{{ VOS.statusName }}</p> -->
                        <p class="table_hint_time">时间：{{ VOS.clockTime }}</p>
                      </div>
                    </template>
                    <a-badge class="table_status_box_title" status="warning" text="缺失" v-if="text === 'false'" />
                    <a-badge class="table_status_box_title" status="processing" text="正常" v-else />
                  </a-tooltip>
                </template>
                <template slot="remark" slot-scope="text, record, index" class="table_status_box">
                  <span v-if="record.recordVOS.length==0">无</span>
                  <a-tooltip placement="top" v-else>
                    <template slot="title">
                      <div v-for="(remarkItem,index) in record.recordVOS" class="table_hints" :key="index">
                        <p>备注信息</p>
                        <p :class="{'table_hint_normal':true}">时间：{{ remarkItem.clockTime }}</p>
                        <p class="table_hint_time">备注：{{ remarkItem.remark }}</p>
                      </div>
                    </template>
                    <span class="table_status_box_title" style="color:#1890ff;">查看</span>
                  </a-tooltip>
                </template>
                <template slot="action" slot-scope="text, record, index" class="table_status_box">
                  <a-button @click="taskTableItemRemark(record)" v-if="record.remarkCount >0">已备注</a-button>
                  <a-button type="primary" @click="taskTableItemRemark(record)" v-else>备注</a-button>
                </template>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>

    <a-modal :width="776" class="Remark_box" title="备注" v-model="RemarkBox" :footer="null">
      <a-form :form="form" @submit="handleSubmit" class="Remark_box_form">
        <a-form-item label="任务时间选择（可多选）">
          <a-select mode="multiple" v-decorator="['recordId', { rules: [{ required: true, message: '请选择数据合作方!' }] },]" placeholder="请选择" :disabled="allRemarkType">
            <a-select-option v-for="item in recordIdSelectObj" :value="item.recordId" :key="item.recordId">
              {{ item.des }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="备注详情">
          <a-textarea v-decorator="['remark', { rules: [{ required: true, message: '请输入备注详情内容!' }] }]" />
        </a-form-item>
        <div class="remark_table">
          <p class="remark_table_title">历史备注信息</p>
          <table v-if="RemarkTableList.length">
            <tr v-for="item in RemarkTableList" :key="item">
              <td class="title">{{ item.remark }}</td>
              <td class="user">{{ item.creator }}</td>
              <td class="time">{{ item.ctime }}</td>
            </tr>
          </table>
          <table v-else>
            <tr>
              <td class="noData">暂时没有备注记录!</td>
            </tr>
          </table>
        </div>
        <a-form-item :wrapper-col="{ span: 8, offset: 18 }">
          <a-button style="width:72px;margin-right: 20px;" class="login-button" @click="UserListSetBox=false">取消</a-button>
          <a-button style="win-width:72px" type="primary" htmlType="submit" class="login-button" :loading="remarkLoginBtn" :disabled="remarkLoginBtn">确定</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
    S
    <a-modal :width="776" class="changeStatus_box" title="操作状态" v-model="changeStatus" :footer="null">
      <a-form :form="changeStatusForm" @submit="changeStatusSubmit" class="changeStatus_box_form">
        <p class="changeStatus_box_title">请根据试验人员任务完成情况操作状态</p>
        <a-form-item label=" 试验人员状态">
          <a-select v-decorator="['userStatus', { rules: [{ required: true, message: '请选择试验人员状态!' }] },]" placeholder="请选择" :disabled="allRemarkType">
            <a-select-option :value="2" v-if="userExperimentInfo.status != 2">进行中</a-select-option>
            <a-select-option :value="5">不合格</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-decorator="['operateDes', { rules: [{ required: false, message: '请输入备注内容!' }] }]" placeholder="请输入详细操作原因（最大限制字数100字）" />
        </a-form-item>
        <!-- <div class="remark_table">
          <p class="remark_table_title">历史备注信息</p>
          <table v-if="RemarkTableList.length">
            <tr v-for="item in RemarkTableList" :key="item">
              <td class="title">{{ item.remark }}</td>
              <td class="user">{{ item.creator }}</td>
              <td class="time">{{ item.ctime }}</td>
            </tr>
          </table>
          <table v-else>
            <tr>
              <td class="noData">暂时没有备注记录!</td>
            </tr>
          </table>
        </div> -->
        <a-form-item :wrapper-col="{ span: 8, offset: 18 }">
          <a-button style="width:72px;margin-right: 20px;" class="login-button" @click="UserListSetBox=false">取消</a-button>
          <a-button style="win-width:72px" type="primary" htmlType="submit" class="login-button" :loading="changeStatusBtn" :disabled="changeStatusBtn">确定</a-button>
        </a-form-item>
      </a-form>
    </a-modal>

  </div>
</template>

<script>

import { STable, Ellipsis } from '@/components'
import { getTestDataUserList, getTestDataUserExperimentInfo, getTestRecordInfo, getTaskRecordRemarkInfo, getTaskSubmitRemarkInfo, postTestDataUserUpdateStatus } from '@/api/experiment'
export default {

  name: 'TestDataDispose',
  components: {
    STable,
    Ellipsis
  },
  props: {
    disposeExperimentId: '',
    disposeDataPartenrId: '',
  },
  data () {
    return {
      allRemarkIdArr: [],
      allRemarkType: false,
      remarkLoginBtn: false,
      changeStatusBtn: false,
      RemarkTableList: [],
      recordIdSelectObj: [],
      changeStatusForm: this.$form.createForm(this, { name: 'coordinated' }),
      form: this.$form.createForm(this, { name: 'coordinated' }),
      RemarkBox: false,
      taskTableAllRemarkObj: [],
      stateFold: false,
      createFormBox: true,
      changeStatus: false,
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        experimentId: '',
        userCode: '',
        status: ''
      },
      // 表头
      visible: false,
      taskTypeObj: {
        '1': '计数任务',
        '3': '选择任务',
        '4': '问卷任务'
      },
      designArray: {
        '0': '预发布',
        '1': '进行中',
        '2': '暂停中',
        '3': '已结束'
      },

      statusObj: {
        '1': 'default', //
        '2': 'processing', //
        '3': 'success', // 进行中
        '4': 'warning', // 已结束
        '5': 'error' // 已暂停
      },
      statusNameObj: {
        '1': '未开启', //
        '2': '进行中', //
        '3': '完成', //
        '4': '主动退出', //
        '5': '不合格' //
      },
      testerTableAll: [
        {
          title: '用户编号',
          dataIndex: 'userCode',
          align: 'center'
        },
        {
          title: '开始时间',
          dataIndex: 'startDate',
          align: 'center'
        },
        {
          title: '用户试验状态',
          dataIndex: 'statusName',
          scopedSlots: { customRender: 'status' },
          align: 'center'
        },
        {
          title: '试验进度',
          dataIndex: 'experimentSchedule',
          scopedSlots: { customRender: 'experimentSchedule' },
          align: 'center'
        },
        {
          title: '任务合格率',
          dataIndex: 'qualifiedRate',
          scopedSlots: { customRender: 'qualifiedRate' },
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '20%',
          scopedSlots: {
            customRender: 'action'
          },
          align: 'center'
        }
      ],
      testerTable: [
        {
          title: '用户编号',
          dataIndex: 'userCode',
          scopedSlots: { customRender: 'userCode' },
          align: 'center',
          width: '33.33%'
        },
        {
          title: '用户试验状态',
          dataIndex: 'statusName',
          align: 'center',
          width: '33.33%'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '33.33%',
          scopedSlots: {
            customRender: 'action'
          },
          align: 'center'
        }
      ],
      taskInfoTable: [
        {
          title: '日期',
          dataIndex: 'date',
          align: 'center',
          width: '33.33%'
        },
        {
          title: '任务状态',
          dataIndex: 'statusName',
          scopedSlots: { customRender: 'statusName' },
          align: 'center',
          width: '33.33%'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '20%',
          scopedSlots: {
            customRender: 'action'
          },
          align: 'center'
        }
      ],
      taskInfoTableQuestionnaire: [
        {
          title: '日期',
          dataIndex: 'date',
          align: 'center',
          width: '30%'
        },
        {
          title: '任务状态',
          dataIndex: 'statusName',
          scopedSlots: { customRender: 'statusName' },
          align: 'center',
          width: '30'
        },
        {
          title: '备注',
          dataIndex: 'remark',
          width: '20%',
          scopedSlots: {
            customRender: 'remark'
          },
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '20%',
          scopedSlots: {
            customRender: 'action'
          },
          align: 'center'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      userListData: parameter => {
        let queryParamObj = { ...this.queryParam, 'experimentId': this.disposeExperimentId, 'dataPartenrId': this.disposeDataPartenrId }
        return getTestDataUserList(Object.assign(parameter, queryParamObj)).then(res => {
          if (res.code === 200) {
            res.data.data = res.data.list
            this.$message.success('试验列表获取' + res.message)
            return res.data
          } else {
            this.$message.error('试验列表获取' + res.message)
            return []
          }
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      taskInfoTableTabArr: {},
      userExperimentInfo: {},
      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      optionAlertShow: true
    }
  },
  computed: {
    rowSelection () {
      // const { selectedRowKeys } = this
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.taskTableAllRemarkObj = selectedRows
          console.log('selectedRows: ', selectedRows)
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name
          }
        })
      }
    }
  },
  methods: {
    changeStatusSubmit (e) {
      e.preventDefault()
      this.changeStatusBtn = true
      this.changeStatusForm.validateFields(['userStatus','operateDes'], (err, values) => {
        if (!err) {
          values.experimentId = this.userExperimentInfo.experimentId
          values.userId = this.userExperimentInfo.userId
          postTestDataUserUpdateStatus(values).then(res => {
            if (res.code === 200) {
              this.$message.success(res.message)
              this.changeStatusBtn = false
              this.changeStatus = false                      
              this.changeStatusForm.resetFields()
              setTimeout(() => {
                this.stateFold = false
                this.$refs.table.refresh(true)               
              }, 500);
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.remarkLoginBtn = true
      this.form.validateFields(['remark', this.allRemarkType ? '' : 'recordId'], (err, values) => {
        if (!err) {
          if (this.allRemarkIdArr) {
            values.recordId = this.allRemarkIdArr
          }
          getTaskSubmitRemarkInfo(values).then(res => {
            if (res.code === 200) {
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
            this.remarkLoginBtn = false
            this.RemarkBox = false
            this.allRemarkIdArr = []
            this.selectedRowKeys = []
          })
        }
      })
    },
    // 批量备注
    taskTableAllRemarkEvent () {
      this.form.resetFields()
      this.allRemarkType = true
      this.allRemarkIdArr = []
      this.taskTableAllRemarkObj.forEach(item => {
        item.recordDetailVOS.forEach(element => {
          this.allRemarkIdArr.push(element.recordId)
        })
      })
      this.QueryTaskRecordRemarkInfo(this.allRemarkIdArr)
      // this.taskTableAllRemark
      this.RemarkBox = true
    },
    // 点击单条备注
    taskTableItemRemark (record) {

      this.form.resetFields()
      this.allRemarkType = false
      this.recordIdSelectObj = record.recordDetailVOS
      const idArr = []
      if (record.recordDetailVOS) {

        record.recordDetailVOS.forEach(item => {
          idArr.push(item.recordId)
        })
      }
      this.QueryTaskRecordRemarkInfo(idArr)
      this.RemarkBox = true
    },
    QueryTaskRecordRemarkInfo (idArr) {
      getTaskRecordRemarkInfo({ 'recordIds': idArr }).then(res => {
        this.RemarkTableList = res.data
      })
      this.taskTableAllRemarkObj = []
    },
    returnTaskData () {
      this.$emit('Cancel')
    },
    userListDataShow () {
    },
    // 点击待处理
    userListDataPending (userId, experimentId) {
      getTestDataUserExperimentInfo({ 'userId': userId, 'experimentId': experimentId }).then(res => {
        this.userExperimentInfo = res.data
        res.data.taskVOS.forEach((item, index) => {
          this.queryTestRecordInfo(item.userId, item.experimentId, item.taskId, index)
        })
        this.stateFold = true
      })

      this.$refs.table.refresh(true)
    },
    // 任务详情数据
    queryTestRecordInfo (userId, experimentId, taskId, index) {
      getTestRecordInfo({ 'userId': userId, 'experimentId': experimentId, 'taskId': taskId, 'pageNo': 1, 'pageSize': 10 }).then(res => {
        this.$set(this.userExperimentInfo.taskVOS[index], 'taskTabData', res.data.list)
      })
    }

  },

  mounted () {
  },
  watch: {
    queryParam: {
      handler () {
        this.$refs.table.refresh(true)
      },
      deep: true
    }
  }
}
</script>

<style  lang="less">
.DataDispose_left {
  float: left;
  background: #fff;
  padding: 20px 35px 30px 35px;
  width: 100%;
  overflow: hidden;
  margin: 0 1% 0 0;
  transition: all 0.3s linear;
}
.DataDispose_left_fold {
  width: 34%;
  transition: all 0.3s linear;
}
.DataDispose_right {
  width: 65%;
  float: right;
  background: #fff;
  transform: translateX(100%);
  transition: all 0.3s linear;
  position: absolute;
  right: 0;
  padding: 20px 35px 30px 35px;
  margin: 0 0 20px;

  .right_header {
    height: 40px;
    line-height: 40px;
    margin-bottom: 25px;
    h3 {
      height: 24px;
      line-height: 24px;
      margin-left: -10px;
      padding-left: 10px;
      background: linear-gradient(to right, #56ced1 0%, #56ced1 3px, #fff 3px, #fff 100%);
      font-size: 20px;
      font-family: PingFangSC-Medium, Microsoft Yahei, sans-serif;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      display: inline-block;
    }
    .right_header_button {
      float: right;
      height: 40px;
      line-height: 40px;
    }
  }
  .right_content {
    .right__info {
      margin-bottom: 30px;
      overflow: hidden;
      .title_badge {
        margin-right: 60px;
        .ant-badge-status-text {
          height: 24px;
          font-size: 16px;
          font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
          font-weight: 400;
          color: rgba(140, 140, 140, 1);
          line-height: 24px;
        }
      }
      .right__info_title {
        height: 24px;
        font-size: 16px;
        font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
        font-weight: 400;
        color: rgba(140, 140, 140, 1);
        line-height: 24px;
        margin-bottom: 20px;
      }
      .right__info_item {
        margin-top: 15px;
        margin-right: 20px;
        float: left;
        span {
          // display: inline-block;
          width: 100px;
          text-align: right;
          height: 40px;
          font-size: 14px;
          font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
          font-weight: 400;
          color: rgba(140, 140, 140, 1);
          line-height: 40px;
          margin-right: 10px;
          float: left;
        }
        i {
          padding-left: 10px;
          font-style: normal;
          width: 170px;
          height: 40px;
          display: inline-block;
          background: rgba(249, 249, 249, 1);
          border-radius: 4px;
          border: 1px solid rgba(239, 239, 239, 1);
          font-size: 14px;
          font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
          font-weight: 400;
          color: rgba(17, 17, 17, 1);
          line-height: 40px;
        }
      }
    }
  }
  .right__info_tab_top {
    width: 60%;
    margin: 0 auto;
    height: 60px;
    line-height: 60px;
    .tab_top_item {
      width: 33.33%;
      margin: 0 auto;
      display: inline-block;
      .tab_top_item_state {
        float: left;
        cursor: pointer;
      }
      i {
        height: 60px;
        line-height: 60px;
        margin-left: 15px;
        font-style: normal;
        font-size: 24px;
        font-family: PingFang-SC-Bold, Microsoft Yahei, sans-serif;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
      }
    }
  }
  .right__info_tab_option {
    span {
      line-height: 20px;
    }
    width: 80%;
    margin: 0 auto;
    min-height: 60px;
    .option_style {
      text-align: right;
      height: 40px;
      font-size: 14px;
      font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
      font-weight: 400;
      color: #8c8c8c;
      margin-right: 10px;
      font-style: normal;
      line-height: 20px;
    }
    .abnormal {
      color: red;
    }
  }
  .taskTableAllRemark {
    height: 32px;
    margin-top: -20px;
    margin-left: 20px;
    margin-bottom: 10px;
  }
}
.DataDispose_right_fold {
  transform: translateX(0%);
  transition: all 0.3s linear;
}
.DataDispose_header {
  h3 {
    height: 24px;
    line-height: 24px;
    margin-left: -10px;
    padding-left: 10px;
    background: linear-gradient(to right, #56ced1 0%, #56ced1 3px, #fff 3px, #fff 100%);
    font-size: 20px;
    font-family: PingFangSC-Medium, Microsoft Yahei, sans-serif;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    display: inline-block;
  }
  p {
    height: 24px;
    font-size: 14px;
    font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
  }
}
.DataDispose_filtrate {
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
  .DataDispose_header_button {
    float: right;
    height: 40px;
    line-height: 40px;
  }
}
.DataDispose_content_icon {
  float: right;
  position: relative;
  top: 58px;
  margin-right: -38px;
  margin-top: -50px;
  font-size: 35px;
  opacity: 0.2;
}
.DataDispose_content_icon:hover {
  opacity: 0.5;
  transition: all 0.3s linear;
}
.Remark_box {
  .ant-modal-title {
    font-size: 18px;
    font-family: PingFangSC-Medium, Microsoft Yahei, sans-serif;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
  }
  .Remark_box_form {
    margin: 0 50px;
    .remark_table {
      width: 100%;
      .remark_table_title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
      }
      table {
        width: 100%;
        margin-bottom: 30px;
        tr {
          width: 100%;
          margin-bottom: 8px;
          height: 36px;
          display: inherit;
          background: #f9f9f9;
          border-radius: 4px;
          border: 1px solid #efefef;
          line-height: 36px;
          .title {
            padding-left: 20px;
            width: 50%;
            font-size: 13px;
            font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
          }
          .user {
            text-align: center;
            width: 20%;
            font-size: 13px;
            font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.25);
          }
          .time {
            text-align: center;
            width: 30%;
            font-size: 13px;
            font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.25);
          }
          .noData {
            width: 100%;
            text-align: center;
            font-size: 13px;
            font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
          }
        }
      }
    }
  }
}
.changeStatus_box {
  .ant-modal-title {
    font-size: 18px;
    font-family: PingFangSC-Medium, Microsoft Yahei, sans-serif;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
  }
  .changeStatus_box_form {
    margin: 0 50px;
    .changeStatus_box_title {
      padding-left: 10px;
      background: linear-gradient(to right, #56ced1 0%, #56ced1 3px, #fff 3px, #fff 100%);
      font-size: 20px;
      font-family: PingFangSC-Medium, Microsoft Yahei, sans-serif;
      font-weight: 600;
      display: inline-block;
      height: 18px;
      font-size: 17px;
      font-family: PingFangSC-Medium, PingFang SC;
      color: rgba(0, 0, 0, 0.85);
      line-height: 18px;
    }
    .changeStatus_table {
      width: 100%;
      .changeStatus_table_title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
      }
      table {
        width: 100%;
        margin-bottom: 30px;
        tr {
          width: 100%;
          margin-bottom: 8px;
          height: 36px;
          display: inherit;
          background: #f9f9f9;
          border-radius: 4px;
          border: 1px solid #efefef;
          line-height: 36px;
          .title {
            padding-left: 20px;
            width: 50%;
            font-size: 13px;
            font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
          }
          .user {
            text-align: center;
            width: 20%;
            font-size: 13px;
            font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.25);
          }
          .time {
            text-align: center;
            width: 30%;
            font-size: 13px;
            font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.25);
          }
          .noData {
            width: 100%;
            text-align: center;
            font-size: 13px;
            font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
          }
        }
      }
    }
  }
}

.table_hints {
  margin-bottom: 10px;
  p {
    margin: 0;
    font-size: 12px;
    font-family: PingFang-SC-Bold, Microsoft Yahei, sans-serif;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 22px;
  }
  .table_hint_time {
    font-size: 12px;
    font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
  .table_hint_normal {
    font-size: 12px;
    font-family: PingFang-SC-Bold, Microsoft Yahei, sans-serif;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 22px;
  }
  .table_hint_lack {
    font-size: 12px;
    font-family: PingFang-SC-Bold, Microsoft Yahei, sans-serif;
    font-weight: bold;
    color: rgba(196, 37, 37, 1);
  }
  .table_hint_repair {
    font-size: 12px;
    font-family: PingFang-SC-Bold, Microsoft Yahei, sans-serif;
    font-weight: bold;
    color: #f8931f;
  }
}
.table_status_box_title {
  cursor: pointer;
}
.table_status_box_title_warning {
  span {
    color: red;
  }
}
.table_error{
  color: red;
}
</style>
